<template>
    <el-tabs v-model="activeName" class="tabs" type="border-card" @tab-click="handleClick">
        <el-tab-pane name="energy" label="能耗表管理"><Energy @gometer="gometer" /></el-tab-pane>
        <el-tab-pane name="meter" disabled label="抄表信息"><Meter :meter_id="obj.meter_id" @returntab="returntab" /></el-tab-pane>
    </el-tabs>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,onActivated } from 'vue'
    import Energy from './energy.vue'
    import Meter from './meter.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        meter_id: ''
    });

    let activeName = ref('energy')
    onActivated((e)=>{
        activeName.value = proxy.$route.query.tabname||'energy'
    })

    let gometer=(e)=>{
        obj.meter_id = e.id;
        activeName.value = 'meter'
    }
</script>

<style lang="scss" scoped>
    .tabs {
         display: flex; flex-direction: column; height: 100%; box-shadow: none; border-radius: 5px; border: 0; 
    }
    .tab { height: 100%; }
</style>